<template>
    <el-menu class="el-menu-vertical-demo" background-color="#304156" text-color="#BFCBD9" active-text-color="#1890ff"
        :default-active="this.$route.path">


        <router-link to="/index">

            <el-menu-item index="Index">
                <template slot="title">
                    <i class="el-icon-s-home"></i>
                    <span slot="title">首页</span>
                </template>
            </el-menu-item>
        </router-link>

        <el-submenu :index="index + ''" v-for="(menu, index) in menuList" :key="index">

            <template slot="title">
                <i :class="menu.icon"></i>
                <span>{{ menu.name }}</span>
            </template>

            <router-link :to="item.path" v-for="(item, indexj) in menu.children" :key="indexj">
                <el-menu-item :index="item.path" v-if="item.hidden === 2">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.name }}</span>
                    </template>
                </el-menu-item>

            </router-link>

        </el-submenu>
        <el-submenu index="setting">
            <template slot="title">
                <i class="el-icon-s-tools"></i>
                <span slot="title">设置</span>
            </template>

            <el-menu-item index="exit">
                <template slot="title">
                    <div @click="exit">
                        <i class="el-icon-switch-button"></i>
                        <span slot="title">退出登录</span>
                    </div>
                </template>
            </el-menu-item>
        </el-submenu>


    </el-menu>
</template>

<script>
import { menu } from '../common/menu';
import { adminExit } from "../api/all"
import router from '../router';
export default {
    name: "SideMenu",
    data() {
        return {
            // menuList: menu.children
        };
    },
    computed: {
        menuList(){
            return this.$store.state.menus;
        },
    },
    methods: {
        exit() {
            adminExit().then(res => {
                // 清除缓存信息
                this.$store.dispatch("CLEAR_LOGIN_INFO")

                this.$message.success("退出成功")
                this.$router.replace("/login")
            })
        }
    },

};
</script>

<style scoped>
.el-menu-vertical-demo {
    height: 100%;
}

.router-link-active {
    text-decoration: none !important;
}

a {
    text-decoration: none;
    /* color: white; */
}
</style>
